<template>
  <div>
    <el-collapse>
      <el-collapse-item v-model="openItem" v-for="(group) in groupModels" :name="group.id" :key="group.id">
        <template slot="title">
          <i class="header-icon el-icon-info"></i> {{ group.name }}
        </template>
        <div class="avue-input-icon__list">
          <div v-if="!!group&&group.models">
            <div class="avue-input-icon__item" v-for="(model) in group.models" @click="startApply(model)">

              <avue-avatar shape="square"  v-if="!!model.modelIcon" size="large" :src="model.modelIcon"></avue-avatar>
              <i class="avue-input-icon__icon el-icon-picture-outline-round" v-else></i>
              <p style="margin: 0;cursor: Default">{{ model.name }}</p>
            </div>
          </div>
          <div v-else>
            <avue-empty style="margin: auto;text-align: center"
                        image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original" desc="暂无可用流程">
            </avue-empty>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <start-dialog ref="startDialog"></start-dialog>
  </div>
</template>

<script>

import {getAllGroupModels} from "@/api/start/activiti/modelApi";
import StartDialog from "@/views/start/activiti/instance/startDialog";

export default {
  name: "IWantToApply",
  components: {StartDialog},
  data() {
    return {
      openItem: [],
      groupModels: []
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      getAllGroupModels().then(res => {
        this.groupModels = res.data.data;
      })
    },
    startApply(model) {
      // let routerJump = this.$router.resolve({path: `/activiti/start/${model.id}`})
      // window.open(routerJump.href, '_blank');
      this.$refs.startDialog.show(model);
    }
  }
}
</script>

<style scoped>

</style>
